<!--
 * @author hugh
 * @time  2021-01-10 11:40
 * @title  表单弹窗
 * @desc
 -->
<template>
  <div class="align-center">
    <el-dialog :title="title" :model-value="show==tag" @close="resetForm(fromRef)">
      <el-form :model="formData" :rules="rules" :ref="fromRef">
        <slot name="content" v-bind="{formData}"></slot>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm(fromRef)">取 消</el-button>
          <el-button type="primary" @click="submitForm(fromRef)">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    toRefs,
    reactive,
    getCurrentInstance
  } from 'vue';
  import {
    useStore
  } from "vuex";
  export default defineComponent({
    name: 'dialogfrom',
    props: {
      title: String,
      tag: String,
      tag1: String,
      show: String,
      fromRef: String,
      rules: Object,
      formData: Object,
    },
    emits: ['onchange', 'onhide'],
    setup(props, {
      emit
    }) {
      //vuex
      const store = useStore();
      //定义data
      const data = reactive(props);
      //绑定挂载全局对象
      const {
        proxy
      } = getCurrentInstance() as any;
      


      function handleChange(evt:any){
        emit('onchange', evt);
      };
      function handleChangeHide(evt:any){
        emit('onhide', evt);
      };
      //包装参数列表
      const refData = toRefs(data);
      return {
        ...refData,
        handleChange,
        handleChangeHide
      }
    },
    methods: {
      submitForm(formName: string) {
        let ref: any = this.$refs[formName];
        ref.validate((valid: string) => {
          if (valid) {
            this.handleChange(undefined);
          } else {
            return false;
          }
        });
      },
      resetForm(formName: string) {
        let ref: any = this.$refs[formName];
        ref.resetFields();
        this.handleChangeHide(undefined);
      }
    }
  })
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
